<template>
	<div class="member-edit padding20">
		<div class="header">
			<div class="back" @click="$router.back()">
				<svg
					t="1670580779943"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="2664"
					width="30"
					height="30"
				>
					<path
						d="M700.371228 394.525472 174.028569 394.525472l255.952416-227.506551c12.389168-11.011798 13.505595-29.980825 2.492774-42.369993-11.011798-12.386098-29.977755-13.506619-42.367947-2.492774L76.425623 400.975371c-6.960529 5.496178-11.434423 14.003945-11.434423 23.561625 0 0.013303 0.001023 0.026606 0.001023 0.039909 0 0.01228-0.001023 0.025583-0.001023 0.037862 0 0.473791 0.01535 0.946558 0.037862 1.418302 0.001023 0.016373 0.001023 0.032746 0.001023 0.049119 0.39295 8.030907 3.992941 15.595186 10.034541 20.962427l315.040163 280.028764c5.717212 5.083785 12.83533 7.580652 19.925818 7.580652 8.274454 0 16.514115-3.403516 22.442128-10.07445 11.011798-12.387122 9.896394-31.357172-2.492774-42.367947l-256.128425-227.665163 526.518668 0c109.219517 0 198.075241 88.855724 198.075241 198.075241s-88.855724 198.075241-198.075241 198.075241L354.324888 850.696955c-16.57449 0-30.011524 13.437034-30.011524 30.011524s13.437034 30.011524 30.011524 30.011524l346.046341 0c142.31631 0 258.098289-115.783003 258.098289-258.098289S842.686515 394.525472 700.371228 394.525472z"
						p-id="2665"
					></path>
				</svg>
			</div>
			<div class="item" :class="{ active: !active }" @click="active = 0">基本信息</div>
			<div class="item" :class="{ active: active == 4 }" @click="active = 4">扩展信息</div>
			<div class="item" :class="{ active: active == 5 }" @click="active = 5">账户信息</div>
			<div class="item" :class="{ active: active == 1 }" @click="active = 1">交易信息</div>
			<div class="item" :class="{ active: active == 2 }" @click="active = 2">银行卡</div>
			<div class="item" :class="{ active: active == 3 }" @click="active = 3">收货地址</div>
		</div>
		<el-form v-show="active == 0" key="0" label-width="140px" :model="formData" :rules="rules">
			<el-form-item label="用户信息">
				<div class="details">
					<img :src="formData.avatar" class="avatar" alt="" />
					<div class="name">{{ formData.nickName }}</div>
				</div>
			</el-form-item>
			<el-form-item label="OPENID">
				<div class="openid">
					{{ formData.openid || "无" }}
					<fortress-copy :copy-data="formData.openid" v-if="formData.openid"></fortress-copy>
				</div>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="formData.gender">
					<el-radio v-for="item in sexList" :key="item.code" :label="+item.code">{{ item.name }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="地址">
				<fortress-region ref="FortressRegionRef" @ftregion="onRegionChange"></fortress-region>
			</el-form-item>
			<el-form-item label="会员等级">
				<el-select placeholder="请选择会员等级" clearable v-model="formData.levelId">
					<el-option v-for="(item, index) in memberLevel" :key="index" :value="item.id" :label="item.name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="生日">
				<el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>
			<el-form-item label="标签组">
				<el-select
					filterable
					allow-create
					default-first-option
					style="width: 100%"
					multiple
					v-model="formData.tags"
					placeholder="请选择标签组"
					clearable
				>
					<el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item label="真实姓名">
				<el-input placeholder="请输入真实姓名"></el-input>
			</el-form-item> -->
			<!-- <el-form-item label="微信号">
				<el-input placeholder="请输入微信号"></el-input>
			</el-form-item> -->
			<!-- <el-form-item label="积分上限">
				<el-radio-group>
					<el-radio label="1">读取系统设置</el-radio>
					<el-radio label="2">自定义</el-radio>
				</el-radio-group>
				<el-input type="number" style="display: inline-block; width: auto; margin-left: 15px;vertical-align: middle;"></el-input>
				<div class="tip red">会员积分上限，0为不限制（后台手动充值不限制。已持有积分不限制，保存后生效)</div>
			</el-form-item> -->
			<el-form-item label="注册时间">{{ formData.createTime }}</el-form-item>
			<!-- <el-form-item label="关注状态">
				<el-button type="primary" size="small">未关注</el-button>
			</el-form-item> -->
			<!-- <el-form-item label="黑名单">
				<el-radio-group>
					<el-radio label="1">是</el-radio>
					<el-radio label="2">否</el-radio>
				</el-radio-group>
				<div class="tip">设置黑名单后，此会员无法访问商城</div>
			</el-form-item> -->
			<el-form-item label="备注">
				<el-input v-model="formData.remark" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSaveBasic">提交</el-button>
				<el-button @click="$router.back()">取消</el-button>
			</el-form-item>
		</el-form>
		<el-form v-show="active == 1" key="1" label-width="140px">
			<el-form-item label="成交订单数">
				13321
			</el-form-item>
			<el-form-item label="成交金额">
				13321
			</el-form-item>
			<el-form-item label="最后成交时间">
				13321
			</el-form-item>
			<el-form-item>
				<el-button type="primary">提交</el-button>
				<el-button @click="$router.back()">取消</el-button>
			</el-form-item>
		</el-form>
		<div v-show="active == 2" key="2">
			<!-- 银行卡 -->
			<memberbankcard :id="userId"></memberbankcard>
		</div>
		<div v-show="active == 3" key="3">
			<!-- 地址 -->
			<memberaddress :id="userId"></memberaddress>
		</div>
		<div v-show="active == 4">
			<!-- 扩展字段 -->
			<member-edit-extend :id="userId"></member-edit-extend>
		</div>
		<div v-show="active == 5" class="account">
			<!-- 账户信息 -->
			<member-edit-account :id="userId" :formData="formData"></member-edit-account>
		</div>
	</div>
</template>

<script>
import request from "@/common/request"
import { memberInfo, memberEdit } from "@/api/member/member.js"
import { dictList, enumList, urlList } from "@/api/public.api.js"

import FortressPagination from "@/components/fortress-pagination.vue"
import memberbankcard from "./memberbankcard.vue"
import memberaddress from "./memberaddress.vue"
import memberEditExtend from "./member-edit-extend.vue"
import memberEditAccount from "./member-edit-account.vue"

export default {
	name: "member-edit",
	data() {
		return {
			active: 5,
			formData: {
				userName: "",
				password: "",
				phone: "",
				nickName: "",
				cardNumber: "",
				openid: "",
				unionid: "",
				avatar: "",
				gender: "",
				birthday: "",
				province: "",
				provinceName: "",
				city: "",
				cityName: "",
				area: "",
				areaName: "",
				source: "",
				invitation: "",
				levelId: "",
				status: "",
				auditStatus: "",
				realType: "",
				remark: "",
				levelId: "",
				tags: [],
			},
			rules: {},
			tagList: [],
			sexList: [],
			sourceList: [],
			MemberStatusList: [],
			YesNoList: [],
			MemberRealTypeList: [],
			levelIdList: [],
			memberLevel: [],
		}
	},
	computed: {
		userId() {
			return this.$route.query.id
		},
	},
	created() {
		this.queryDictList()
		this.queryEnumList()
		this.queryUrlList()
		this.getInfo()
	},
	methods: {
		queryDictList() {
			this.sexList = []
			dictList("sex").then(resp => {
				if (resp.code == 0) {
					this.sexList = resp.data
				}
			})
			this.sourceList = []
			dictList("source").then(resp => {
				if (resp.code == 0) {
					this.sourceList = resp.data
				}
			})
		},
		queryEnumList() {
			this.MemberStatusList = []
			enumList("MemberStatus", "").then(resp => {
				if (resp.code == 0) {
					this.MemberStatusList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
			this.MemberRealTypeList = []
			enumList("MemberRealType", "").then(resp => {
				if (resp.code == 0) {
					this.MemberRealTypeList = resp.data
				}
			})
		},
		queryUrlList() {
			this.levelIdList = []
			urlList("/member/memberVipLeve/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.levelIdList.push({ code: item.id, name: item.name })
						})
					}
				}
			})
			this.tagList = []
			urlList("/member/memberTag/list").then(res => {
				this.tagList = res.data
			})
			this.memberLevel = []
			urlList("/member/memberLevel/list").then(res => {
				this.memberLevel = res.data
			})
		},
		async getInfo() {
			try {
				const { code, data, msg } = await memberInfo(this.userId)
				if (code != 0) {
					throw new Error(msg)
				}
				if (data.tags) {
					data.tags = data.tags.split(",")
				} else {
					data.tags = []
				}
				this.formData = data
				this.$refs.FortressRegionRef.init([data.provinceCode, data.cityCode, data.areaCode])
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async onSaveBasic() {
			try {
				const { code, msg } = await memberEdit({
					...this.formData,
					tags: this.formData.tags ? this.formData.tags.join(",") : "",
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.$message.success("保存成功")
			} catch (error) {
				this.$message.error(error.message)
			}
		},

		onRegionChange(_value, nodes) {
			this.formData.provinceCode = nodes[0].id
			this.formData.provinceName = nodes[0].name
			this.formData.cityCode = nodes[1].id
			this.formData.cityName = nodes[1].name
			this.formData.areaCode = nodes[2].id
			this.formData.areaName = nodes[2].name
		},
	},
	components: {
		memberbankcard,
		memberaddress,
		memberEditExtend,
		FortressPagination,
		memberEditAccount,
	},
}
</script>

<style lang="scss" scoped>
.member-edit {
	.header {
		font-size: 14px;
		color: #515a6e;
		text-align: center;
		border-radius: 5px 5px 0 0;
		padding-left: 20px;
		padding-top: 10px;
		background: #f5f7f9;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;

		.back {
			width: 20px;
			height: 20px;
			position: relative;
			margin-right: 30px;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			&::after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				transform: scale(3);
			}
		}
		.item {
			background: #fff;
			height: 40px;
			line-height: 40px;
			border-radius: inherit;
			padding: 0 17px;
			margin-right: 20px;
			cursor: pointer;
			user-select: none;

			&.active {
				color: #0cafcc;
			}
		}
	}

	.details {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.avatar {
			width: 65px;
			height: 65px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 17px;
		}
	}
	.account {
		padding-bottom: 25px;
	}

	.tip {
		font-size: 14px;
		color: #999;

		&.red {
			color: #eb6060;
		}
	}
}
</style>
